<template>
  <div class="app">
    <div class="list">
    <!-- //开始考勤 -->
      <div class="picker">
            <div class="search">

                <div class="date">
                考勤日期：
                    <div class="demo-date-picker">
                      <el-date-picker
                       
                        type="date"
                        placeholder="Pick a day"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                      >
                        <template #default="cell">
                          <div class="cell" :class="{ current: cell.isCurrent }">
                            <span class="text">{{ cell.text }}</span>
                            <span v-if="isHoliday(cell)" class="holiday" />
                          </div>
                        </template>
                      </el-date-picker>
                    </div>
                类型：
                      <el-select  class="m-2" placeholder="一年级一班">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                </div>
                
                <div class="btns">
                    <el-row class="mb-4">
                        <el-button type="primary">开始考勤</el-button>       
                    </el-row>
                </div>  
            </div>
        </div>
    <!-- 图表 -->
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100% ;" :border="true" type="index"  >
          <el-table-column  type="index" width="100" label="序号" align="center"></el-table-column>
          <el-table-column prop="classgrade" label="年级班级" width="180" align="center" style="color:blue"/>
          <el-table-column prop="studentname" label="学生姓名" width="180" align="center"/>
          <el-table-column prop="sex" label="性别" width="150"  align="center"/>
          <el-table-column prop="id" label="学籍号" width="230"  align="center"/>
          <el-table-column prop="todystatus" label="今日考勤状态" width="180"  align="center" />
          <el-table-column prop="phone" label="电话号码" width="180"  align="center" />
      </el-table>
    </div>
      
  </div>
  </div>
</template>

<script setup>
import {duty_list}from '../../../utils/api'
import { onMounted } from 'vue';
import {ref} from 'vue'
let searchText=ref();

const options = [
  {
    value: '迟到',
    label: '迟到',
  },
  {
    value: '缺勤',
    label: '缺勤',
  }
]


let handleClick=()=>{
//发查询的请求
}
let tableData=ref([])

onMounted(()=>{
  duty_list().then((res)=>{
    console.log(res.data.list)
    tableData.value=res.data.list
    console.log(res.data)
  })
})
//默认日期设置
const value = ref('2021-10-29')
const holidays = [
  '2021-10-01',
  '2021-10-02',
  '2021-10-03',
  '2021-10-04',
  '2021-10-05',
  '2021-10-06',
  '2021-10-07',
]

const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format('YYYY-MM-DD'))
}
</script>

<style scoped>
.app{
  background-color: #f7f7f7;
  padding: 25px 15px;
}

.search{
    width: 100%;
    height: 140px;
    display: flex;
    background-color: white;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 40px;
  }
.search input{
    height: 30px;
    border-radius: 5px;
    outline: none;
    border: 1px solid #cccccc;
}
.table{
  padding:0 30px ;
  padding-bottom: 200px;
  background: white;
}
.date{
  display: flex;
  align-items: center;
}
</style>